翻译|How to Export a Connected Component

发表于 | 更新于: | 分类于 | 阅读次数:
字数统计: 517 | 阅读时长 ≈ 2

原文在这里:How to Export a Connected Component

根据你在export的不同,可以获得一个完美的函数式React-Redux connected组件,或者是一个完全忽略Redux的组件

换句话说这里两个完全不同的世界:

1
2
3
class Thing extends Component { ... }

export default connect(mapStateToProps)(Thing);

还有这个:

1
2
3
export class Thing extends Component { ... }

connect(mapStateToProps, mapDispatchToProps)(Thing);

如果设定为第二个实例,可以注意到所有的React有关的东西,但是Redux的函数,mapStateToProps和mapDispatchToProps没有返回

connect不会对组件作出改变

在你用connect包装一个组件的时候, 例如connect(...)(Thing),重要的一点要理解,虽然返回的是一个connected的组件,但是它根本没有动过原始的Thing组件任何东西.

换句话说,运行connect(...)(Thing),没有”connect”到Thing组件,缺失没有. 所做的是翻译一个经过连接的新组件.

导出Connected组件

所以,在导出组件的时候,一定要定义到底连接的是哪一个组件.确保export关键字出现在 connect调用的前面,像这样:

1
export default connect(...)(Thing);

为什么不同时导出原始组件和经过连接的组件?

同时导出连接组件和未连接组件非常有效.对于测试大有好处-例如想测试没有没有连接到模拟Redux store的组件.

下面是同时导出未连接组件和连接组件的代码:

1
2
3
4
5
6
7
8
9
10
export class Thing extends React.Component {
  render() {
    return "whatever";
  }
}

const mapState = state => ({ someValue });
const mapDispatch = { action1, action2 };

export default connect(mapState, mapDispatch)(Thing);

注意这里有两个导入,其中之一是名字,另一个是default,这里的定义很重要,因为会影响到后面的导入(import).

Import 连接组件

总的原则是,如果某个代码是用exprot default,在导入的时候不用{},;例如:

1
2
3
4
5
// Thing.js
export default connect(...)(Thing);

// UserOfThing.js
import Thing from './Thing';

如果导出的是名字,需要使用{}:

1
2
3
4
5
// Thing.js
export function Thing() { ... }

// UserOfThing.js
import { Thing } from './Thing';